<template>
	<view class="page">

		<view class="avatar">
			<u--image :src="model1.userInfo.headimgurl" width="110px" height="110px" shape="circle"></u--image>
		</view>
<!-- 		<view class="avatar-btn">
			<u-button @tap="upload" text="更改头像"></u-button>
		</view> -->
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
			<u-form-item label="账号" prop="userInfo.account" borderBottom  ref="item1">
				<u--input v-model="model1.userInfo.account" placeholder="请输入账号" border="none"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="userInfo.password" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.password"  placeholder="请输入密码"  border="none"></u--input>
			</u-form-item>
		</u--form>

		<u-button @click="submit" class="submit">提交</u-button>

	</view>
</template>

<script>

	export default {
		data() {
			return {
				model1: {
					userInfo: {
						headimgurl: '',
						account: '',
						password: '',
					},
				},
				rules: {
					'userInfo.account': {
						type: 'string',
						required: true,
						max: 30,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
				
					'userInfo.password': {
						type: 'string',
						max: 30,
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			}
		},
		onShow() {
			// 获取当前用户信息
			this.getUserInfo()

		},
		methods: {
			checkboxClick(index) {
				let s = this.model1.userInfo.tag[index].select 
				this.model1.userInfo.tag[index].select = s == 0 ? 0 : 1
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			// 获取当前用户信息
			getUserInfo() {
				// UserApi.userInfo().then(res => {
				// 	console.log(res)
				// 	this.model1.userInfo = res.info
				// })
			},

			submit() {
			
				this.$refs.uForm.validate().then(res => {
					//uni.$u.toast('校验通过')
					// UserApi.userUpdate(this.model1.userInfo).then(res => {
					// 	uni.$u.toast(res.info)
					// })
				}).catch(errors => {
					//	uni.$u.toast('校验失败')
				})
			},

			upload() {
				let that = this;
				uni.chooseImage({
					success: (chooseImageRes) => {
						that.model1.userInfo.headimgurl = chooseImageRes.tempFilePaths[0];
						uni.uploadFile({
							header: {
								Authorization: Config.getStorageUserId(),
							},
							url: Config.baseUrl +
								'/api/miniapp/user.php?act=upload_img',
							filePath: chooseImageRes.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								//uni.$u.toast(res.info)
								let d = JSON.parse(uploadFileRes.data)
								if (d.status == 200) {
									this.model1.userInfo.headimgurl = d.url
									uni.$u.toast(d.info)
								} else {
									uni.$u.toast('更新失败')
								}

							}
						});
					}
				});
			},

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style scoped lang="scss">
	.page {
		margin: 50rpx 150rpx;

		.avatar {
			height: 250rpx;
			text-align: center;
			width: 200rpx;
			margin: auto;
		}

		.avatar-btn {
			width: 200rpx;
			margin: auto;
		}

		.tag {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.tag-item {
				margin-bottom: 20rpx;
			}
		}

		.submit {
			background: #ffd91d;
		}
	}
</style>